<template>
    <div class="account-binding-02">
        <c-wrap title="户号绑定">
            <mt-field label="户号" placeholder="输入户号进行检测" v-model="householdNo">
                <mt-button plain @click="clickSearch">
                    <icon clazz="icon-search" style="width: 24px;height: 24px;"></icon>
                </mt-button>
            </mt-field>
            <div class="break"></div>
            <div v-if="data.length>0">
                <p style="text-align: left;background-color: white;margin: 0;padding: 10px;color: rgba(0,0,0,.5);">
                    检测结果</p>
                <div :style="{height:height+'px','overflow-y':'auto'}">
                    <c-cell :data="data" title="户号绑定" :householdNo="householdNo" @binding="handleClick"></c-cell>
                </div>
            </div>
            <div
                style="position: absolute;bottom: 0;width: 100%;background-color: white;padding-bottom: 10px;margin-top: 10px">
                <p style="text-align: left;margin:5px 10px"><span style="color: red;">*</span>请务必确认住户信息</p>
                <mt-button type="primary" style="margin-top: 0" @click="handleBinding">绑定</mt-button>
            </div>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'

    export default {
        components: {CWrap, CCell},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top - 48 - 102 - 41,
                householdNo: '',
                terminalId: 0,
                data: []
            }
        },
        methods: {
            clickSearch() {
                let plusLoading;
                if (!this.householdNo) {
                    this.$toast({message: '请输入户号！'});
                    return;
                }
                if (app.config.setting.platform === 'mobile') {
                    window.plus.nativeUI.showWaiting("等待中...");
                } else {
                    this.$indicator.open({
                        spinnerType: 'fading-circle'
                    });
                }
                app.ajax.get(app.config.api.account.select, {
                    householdNo: this.householdNo,
                    pageSize: 20,
                    pageNum: 1
                }, (res) => {
                    if (res.data.length > 0) {
                        this.data = res.data
                    } else {
                        this.data = [];
                        this.$toast({message: '未检测到户号相关信息！'})
                    }
                    if (app.config.setting.platform === 'mobile') {
                        window.plus.nativeUI.closeWaiting();
                    } else {
                        this.$indicator.close();
                    }
                })
            },
            handleClick(item) {
                this.terminalId = item.id;
            },
            handleBinding() {
                if (this.terminalId === 0) {
                    this.$toast('请选择户号！')
                } else {
                    app.ajax.post(app.config.api.account.binding, {
                        terminalId: this.terminalId
                    }, (res) => {
                        if (res.s === 0) {
                            app.util.localStorage('terminalId', this.terminalId);
                            app.util.localStorage('user.name', res.data.name);
                            app.util.localStorage('user.householdNo', res.data.householdNo);
                            app.util.localStorage('user.chargeWayTxt', res.data.chargeWayTxt);
                            app.util.localStorage('user.address', res.data.address);
                            let ladderVolume = res.data.ladderVolume.split(',');
                            app.util.localStorage('user.ladderVolumeFirst', ladderVolume[0]);
                            app.util.localStorage('user.ladderVolumeSecond', ladderVolume[1]);
                            app.util.localStorage('user.ladderVolumeThree', ladderVolume[2]);
                            setTimeout(() => {
                                this.$router.push({name: 'index'});
                            }, 2000)
                        }
                    })
                }
            }
        }
    }
</script>
<style>
    /*.account-binding-02 .mint-field .mint-cell-value {*/
    /*width: 90%;*/
    /*}*/
    /*.account-binding-02 .mint-field .mint-cell-title {*/
    /*flex: unset;*/
    /*margin-right: 20px;*/
    /*}*/
</style>

